import React from "react";
import { Layout, Menu } from "antd";
import * as Icon from "@ant-design/icons";
import menus from "../../mock/data/menus";
import { useNavigate } from "react-router-dom";
import './aside.scss'
import { useSelector, useDispatch } from "react-redux";
import { setMenu } from "../../store/slices/menu";

const { Sider } = Layout;
const MyAside = (props) => {
  const { collapsed } = props;
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const menu = useSelector((state) => state.menu);
  console.log("menu", menu);

  const iconToElement = (name) => React.createElement(Icon[name]);
  const getItems = (items, list = []) => {
    items.map((item) => {
      list.push({
        key: item.path,
        ...(item.icon ? { icon: iconToElement(item.icon) } : []),
        label: item.label,
        ...(item.children ? { children: getItems(item.children) } : []),
      });
    });
    return list;
  };

  const selectMenu = e => {
    dispatch(setMenu(e.key))
    navigate(e.key);
  };

  return (
    <Sider trigger={null} collapsible collapsed={collapsed} style={{ height: "100vh" }}>
      <div className="demo-logo-vertical" />
      <Menu
        mode="inline"
        items={getItems(menus)}
        onClick={selectMenu}
        selectedKeys={menu.menu}
      />
    </Sider>
  );
};

export default MyAside;
